<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script crossorigin="anonymous" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
            src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
    <style>
        .container {
            margin: auto;
            width: 620px;
            font-size: 12px;
        }

        table {
            border-right: solid 1px #000000;
            margin: auto;
        }

        td {
            height: 30px;
        }

        .cell-head {
            border: solid 1px #000000;
            border-right: 0;
            text-align: center;
            font-size: 16px;
        }

        .cell {
            border: solid 1px #000000;
            border-top: 0;
            border-right: 0;
            text-align: center;
        }

    </style>

</head>
<body style="background-color: paleturquoise">

<div class="container"><a href="/view/users/add">添加用户</a></div>


<table border="1" cellspacing="0" cellpadding="0" width="600">
    <caption style="font-size:30px;color: khaki">用户</caption>


    <tr class="row">
        <td class="cell-head">名字</td>
        <td class="cell-head">性别</td>
        <td class="cell-head">年龄</td>
        <td class="cell-head">操作</td>
    </tr>

    <div class="container" th:each="user: ${users}">

        <tr class="row">
            <td class="cell" th:text="${user.name}">Oranges</td>
            <td class="cell" th:text="${user.sex}">Oranges</td>
            <td class="cell" th:text="${user.age}">Oranges</td>
            <td class="cell">
                <a th:href="${'/view/users/borrow?userId='+user.id}">我的借阅记录</a>
                <a th:href="${'/view/users/edit?id='+user.id}">编辑</a>
                <a href="javascript:void(0)" class="delete" th:data-name="${user.name}">删除</a>
                <a th:href="${'/view/users/password?id='+user.id}">修改密码</a>

                <a th:href="${'/view/books?userId='+user.id}">书本</a>
                <!--                <a th:href="${'/view/books?id='+user.id}">书本</a>-->

            </td>

        </tr>
    </div>
</table>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".delete").click(function () {
            $.get('/user/delete', {
                name: $(this).attr('data-name')
            }, function (res) {
                if (res.code === 1) {
                    alert('删除成功');
                    location.href = "/view/users";
                } else {
                    alert(res.message);
                }
            }, 'json')
        });


    });
</script>

</body>
</html>